<div *ngIf="questionnaire" class="questionnaire-container">
  <!-- <alert *ngIf="alert" [type]="alert.type">{{alert.msg}}</alert> -->
  <div class="questionnaire">
    <h1 *ngIf="!editable" class="text-center">{{questionnaire.title}}</h1>
    <h1 *ngIf="editable" class="text-center">
      <input placeholder="问卷标题" class="form-control" [(ngModel)]="questionnaire.title"/>
    </h1>
    <p *ngIf="!editable" class="text-center">{{questionnaire.starter}}</p>
    <p *ngIf="editable" class="text-center">
      <input placeholder="开头欢迎语" class="form-control" [(ngModel)]="questionnaire.starter"/>
    </p>
    <ul>
      <li *ngFor="let question of questionnaire.questionList; let i=index"
                [ngSwitch]="question.type">
        <label>第{{i+1}}题：</label>
        <div *ngSwitchCase="0">
          <qn-question-text [question]="question" [editable]="editable" 
            (deleteQuestionReq)="onDeleteQuestion(i)"></qn-question-text>      
        </div>
        <div *ngSwitchCase="1">
          <qn-question-radio [question]="question" [editable]="editable" 
            (deleteQuestionReq)="onDeleteQuestion(i)"></qn-question-radio>
        </div>
        <div *ngSwitchCase="2">
          <qn-question-checkbox [question]="question" [editable]="editable" 
            (deleteQuestionReq)="onDeleteQuestion(i)"></qn-question-checkbox>
        </div>
        <div *ngSwitchCase="3">
          <qn-question-score [question]="question" [editable]="editable" 
            (deleteQuestionReq)="onDeleteQuestion(i)"></qn-question-score>
        </div>
      </li>
    </ul>
    <p *ngIf="!editable" class="text-center">{{questionnaire.ending}}</p>
    <p *ngIf="editable" class="text-center">
      <input placeholder="结尾感谢语" class="form-control" [(ngModel)]="questionnaire.ending"/>
    </p>
  </div>
  <div class="text-center">
    <button type="button" class="btn btn-primary" click="onSubmit()">提交</button>
  </div>
</div>
